<template>
    <el-dialog :title="$t('game.other.mail.dialog.update')" width="700px" :visible.sync="dialogVisible" @close="$emit('update:visible', false)">
        <div class="pr-12">
            <el-form :model="dataCache" label-width="85px">
                <!--平台-->
                <el-form-item :label="$t('platform.setting.tree.org')" :error="Boolean(msg.errors['plat_code']) ? msg.errors['plat_code'][0] : ''" required>
                    <component-page-org-tree-option v-model="dataCache.plat_code"></component-page-org-tree-option>
                </el-form-item>
                <!--类型-->
                <el-form-item :label="$t('game.other.mail.type')" :error="Boolean(msg.errors['type']) ? msg.errors['type'][0] : ''" required>
                    <el-select v-model="dataCache.type">
                        <el-option v-for="(item, index) in $t('game.other.mail.typeList')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--标题-->
                <el-form-item v-for="(item,index) in dataCache.title_ids" :key="`title.${index}`"
                              :label="!index ? $t('game.other.mail.title') : ''" required
                              :error="Boolean(msg.errors[`title_ids.${index}`]) ? msg.errors[`title_ids.${index}`][0] : ''">
                    <el-col :span="22">
                        <component-page-selection-dictionary v-model="dataCache.title_ids[index]"></component-page-selection-dictionary>
                    </el-col>
                    <el-col :span="2" class="text-right">
                        <el-button size="small" icon="el-icon-close" circle @click="removeItemOrAdd(dataCache.title_ids, index, null)"></el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" @click="addItem(dataCache.title_ids,null)">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--内容-->
                <el-form-item v-for="(item,index) in dataCache.body_ids" :key="`body.${index}`"
                              :label="!index ? $t('game.other.mail.body') : ''" required
                              :error="Boolean(msg.errors[`body_ids.${index}`]) ? msg.errors[`body_ids.${index}`][0] : ''">
                    <el-col :span="22">
                        <component-page-selection-dictionary v-model="dataCache.body_ids[index]"></component-page-selection-dictionary>
                    </el-col>
                    <el-col :span="2" class="text-right">
                        <el-button size="small" icon="el-icon-close" circle @click="removeItemOrAdd(dataCache.body_ids, index, null)"></el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" @click="addItem(dataCache.body_ids,null)">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--内容参数-->
                <el-form-item :label="$t('game.other.mail.body_param')" :error="error_body_param" :required="!!dataCache.body_param.length">
                    <el-input v-for="(param, index) in dataCache.body_param" :key="index"
                              class="w-24" v-model="dataCache.body_param[index]"></el-input>
                    <el-button v-if="dataCache.body_param.length" size="small" icon="el-icon-close" circle
                               @click="removeItem(dataCache.body_param,dataCache.body_param.length-1)"></el-button>
                    <span :class="{'block':dataCache.body_param.length}">
                        <el-button size="small" @click="addItem(dataCache.body_param,null)">{{ $t('action.add') }}</el-button>
                    </span>
                </el-form-item>
                <!--附件商品-->
                <el-form-item v-for="(annex, index) in dataCache.annex" :key="index"
                              :label="!index ? $t('game.other.mail.annex'): ''" required
                              :error="Boolean(msg.errors['annex']) ? msg.errors['annex'][0] : ''
                                   || Boolean(msg.errors[`annex.${index}.1`]) ? msg.errors[`annex.${index}.1`][0] : ''
                                   || Boolean(msg.errors[`annex.${index}.0`]) ? msg.errors[`annex.${index}.0`][0] : ''">
                    <el-col :span="8">
                        <el-select v-model="dataCache.annex[index][0]">
                            <el-option v-for="item in $t('game.setting.item.items')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="14">
                        <el-input type="number" v-model.number="dataCache.annex[index][1]" :placeholder="$t('game.setting.item.number')"></el-input>
                    </el-col>
                    <el-col :span="2" class="text-right">
                        <el-button size="small" icon="el-icon-close" circle @click="removeItem(dataCache.annex, index)"></el-button>
                    </el-col>
                </el-form-item>
                <el-form-item :label="!dataCache.annex.length ? $t('game.other.mail.annex') : ''">
                    <el-button size="small" @click="addItem(dataCache.annex,[1,null])">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--过期时间-->
                <el-form-item :label="$t('game.other.mail.expire_time')" :error="Boolean(msg.errors['expire_time']) ? msg.errors['expire_time'][0] : ''" required>
                    <component-page-option-datetime v-model="dataCache.expire_time" type="datetime" :clearable="false"></component-page-option-datetime>
                </el-form-item>
                <!--操作-->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                    <el-button @click="dialogVisible = false">{{ $t('action.cancel') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "ItemUpdate",
    props: ['visible', 'data'],
    data() {
        return {
            dialogVisible: false,
            dataCache: {
                type: null,
                title_ids: [null],
                body_ids: [null],
                body_param: [],
                annex: [],
                expire_time: null,
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
        }
    },
    computed: {
        error_body_param: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'body_param')) {
                    return this.msg.errors[key][0];
                }
            }
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 初始化参数
                this.initData();
                // 显示模态框
                this.dialogVisible = n;
            }
        }
    },
    methods: {
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        initData() {
            this.initMsg();
            this.dataCache = _.cloneDeep(this.data);
        },
        addItem(configs, item) {
            configs.push(_.cloneDeep(item));
        },
        removeItem(configs, index) {
            configs.splice(index, 1);
        },
        removeItemOrAdd(configs, index, item) {
            this.removeItem(configs, index);
            if (!configs.length) {
                this.addItem(configs, item);
            }
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/other/mail/server/update', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.edit')}),
                        showClose: true
                    });
                    this.dialogVisible = false;
                    // 广播事件到父组件
                    this.$emit('update');
                } else if (_.includes([42000], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.edit')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
